<template>
    <div class="newstart">
        <div class="container">
            <div class="header">

                <Head :title="devtitle"></Head>
            </div>
        </div>
        <div class="container">
            <div class="Menu">
                <Mymenu :menuobj="menudata" @devInfo="menuDev"></Mymenu>
            </div>
            <div class="Content">
                <router-view :title="subDev" :key="componentKey"></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, toRefs } from 'vue';
import Mymenu from '../components/Mymenu.vue'
import Head from '../components/Head.vue';
const devtitle = "设备管理系统"
const componentKey = ref(0)

const subTitel = {
    subTitel: "",
    subType: "",
}

const subDev = toRefs(subTitel)

const menuDev = (title, type) => {
    subDev.subTitel = title
    subDev.subType = type
    console.log(subDev)
    componentKey.value++
}

const menudata = [
    {
        index: '/entry',
        title: '站点1',
        icon: 'ChatSquare',
        children: [
            { index: '/dev', title: 'pcs1', type: "pcs" },
            { index: '/dev', title: 'bms1', type: "bms" },
            { index: '/dev', title: '制冷1-sn10001', type: "aircond" },
        ],
    },
    {
        index: '2',
        title: '站点2',
        icon: 'setting',
        children: [
            { index: '/dev', title: 'pcs1-sn10001', type: "pcs" },
            { index: '/dev', title: 'bms1-sn10001', type: "bms" },
            { index: '/dev', title: '制冷1-sn10001', type: "aircond" },
        ],
    }, {
        index: '3',
        title: '站点3',
        icon: 'cpu',
        children: [
            { index: '/dev', title: 'pcs1', type: "pcs" },
            { index: '/dev', title: 'bms1', type: "bms" },
            { index: '/dev', title: '空调', type: "aircond" },
        ],
    },
]
</script>

<style scoped>
/* Your CSS styles here */
.container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: #555;
}

.header {
    flex: 1;
    height: 10vh;
    width: 100vh;
    background-color: #4d8bb4;
    color: #fff;
    text-align: center;
    padding-top: 2vh;
    font-size: 40px;
}

.Menu {

    background-color: #444;
    color: #fff;
    overflow-y: auto;
}

.Content {
    flex: 1;
    background-color: #333;
    color: #fff;
    padding: 20px;
    overflow-y: auto;
    font-size: 20px;
    text-align: center;
    height: 80vh;
}
</style>